body{
  background: #1E2022;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

:root{
  --squish-animation-time: 500ms;
  --progress-anmation-time: 1000ms;
  --circle-animation-time: 300ms;
  --checkmark-animation-time: 300ms;
  --btn-width: 125px;
  --btn-height: 40px;
}

.btn {
  position: relative;
  background: #2C2E30;
  color: #7BD5C2;
  border: none;
  border-radius: .125em;
  width: var(--btn-width);
  height: var(--btn-height);
  font-weight: bold;
  cursor: pointer;
  padding: 0;
}

.btn::after{
  content: '';
  display: none;
  position: absolute;
  background: #777;
  border-radius: .125em;
  left: 50%;
  right: 50%;
  top: 45%;
  bottom: 45%;
  animation: progrss var(--progress-anmation-time) var(--squish-animation-time);
  animation-fill-mode: forwards;
}

.btn::before{
  content: '';
  display: none;
  position: absolute;
  inset: 0;
  background: #2C2E30;
  border-radius: .125em;
  animation: squish var(--squish-animation-time) cubic-bezier(0.1, 0.76, 0.76, 1.36);
  animation-fill-mode: forwards;
}

.btn.animating{
  background-color: transparent;
  color: transparent;
  user-select: none;
  cursor: default;
  animation: hide 0ms calc(var(--squish-animation-time) + var(--progress-anmation-time)) forwards;
}

.btn.animating::after,
.btn.animating::before{
  display: block;
}

.btn.animating + .check_box{
  display: flex;
  background-color: #2b2d2f;
  border-radius: .25em;
  width: 0;
  height: 0;
  animation: circle var(--circle-animation-time) calc(var(--squish-animation-time) + var(--progress-anmation-time)) forwards cubic-bezier(0.26, 0.6, 0.46, 1.7);
  justify-content: center;
  align-items: center;
}

.btn.animating + .check_box .check_svg{
  width: 25px;
  animation:  checkmark var(--checkmark-animation-time) calc(var(--squish-animation-time) + var(--progress-anmation-time) + var(--circle-animation-time)) forwards cubic-bezier(0.26, 0.6, 0.46, 1.7);
  stroke: white;
  stroke-dashoffset: 40.84104919433594;
  stroke-dasharray: 40.84104919433594;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 3px;
}

@keyframes squish {
  100% {
    left: -25%;
    right: -25%;
    top:45%;
    bottom:45%;
    border-radius: .25em;
  }
}

@keyframes progrss {
  100% {
    left: -25%;
    right: -25%;
  }
}

@keyframes hide {
  100% {
    width: 0;
    height: 0;
  }
}

@keyframes circle{
  0% {
    width: calc(var(--btn-width) * 1.50);
    height: calc(var(--btn-height) * .1);
  }
  100% {
    background-color: #71dfbe;
    width: 50px;
    height: 50px;
    border-radius: 100%;
  }
}

@keyframes checkmark{
  100% {
    stroke-dashoffset: 0;
  }
}